<template>
  <div class="pwd">
    <van-form>
      <van-cell-group inset>
        <van-field v-model="user_info.mobile" readonly />
        <!-- <van-fiel v-model="user_info.mobile" readonly placeholder="请输入验证码" label="zhagnh " /> -->
        <van-field v-model="formData.verificationCode" placeholder="请输入验证码">
          <template #right-icon>
            <span class="solts">
              <van-button type="primary" class="getCodeClass" @click="getImgcode" :disabled="!!formData.counter">{{formData.sendBtnText}}</van-button>
            </span>
          </template>
        </van-field>
      </van-cell-group>
    </van-form>
    <van-button type="primary" class="block_gradual" :loading="formData.loading" @click="setPwd">修改</van-button>

    <payPwd :formData='formData' ref="pwdwarp" />
  </div>
  <div v-if="formData.imgcodeShow" class="imgcode">

    <div class="warp">
      <van-icon name="close" @click="close" class='close' />
      <h1>请输入图像验证码</h1>
      <div class="flex">
        <img :src="formData.img" alt="">
        <van-cell-group inset>
          <van-field v-model="formData.imgcode" required placeholder="请输入验证码" />
        </van-cell-group>

      </div>
      <van-button type="primary" class="block_gradual" :loading="formData.loading" @click="GetCode">确定</van-button>
    </div>
  </div>
</template>
<script>

import { defineComponent, reactive, computed, onMounted, ref } from 'vue'
import { useStore } from "vuex";
import { useRouter } from 'vue-router'
import { editPayPassword, getCode, imgcode } from "@/api/user";
import { Toast } from "vant";
import payPwd from "@/components/payPwd.vue";
import { formatPhoneNumber } from "@/utils/phone";
import { getLocal } from "@/utils/localStorage";
export default {
  components: {
    payPwd
  },
  setup(props) {
    const store = useStore();
    const router = useRouter()
    const user_info = computed(() => {
      return store.getters.user_info
    })
    const pwdwarp = ref(null)
    const formData = reactive({
      loading: false,
      sendBtnText: "获取验证码",
      verificationCode: '',
      mobile: store.getters.user_info.mobile,
      imgcodeShow: false,
    })
    const GetCode = async () => {

      const tel = localStorage.getItem('tel')
      const data = { mobile: tel, type: 3, uuid: formData.uuid, verificationCode: formData.imgcode }
      Toast.loading({
        duration: 0,
        forbidClick: true
      });
      getCode(data).then(res => {
        console.log(res)
        if (!res.data.success) {
          getImgcode()

          Toast.fail(res.data.message);

        } else {
          formData.imgcodeShow = false
          Toast.clear();
          formData.counter = 60
          formData.sendBtnText = `(${formData.counter}秒)后重新发送`
          const timer = setInterval(() => {
            formData.counter--
            formData.sendBtnText = `(${formData.counter}秒)后重新发送`
            if (formData.counter <= 0) {
              formData.sendBtnText = "获取验证码"
              clearInterval(timer)
            }
          }, 1000)
        }

      })

    }
    const close = () => {
      formData.imgcodeShow = false
    }
    const getImgcode = () => {
      if (formData.mobile === '') {
        Toast('请填写手机号');
        return
      }
      formData.imgcodeShow = true
      imgcode().then(res => {
        console.log(res)
        if (res.data.success) {
          formData.img = res.data.data.img
          formData.uuid = res.data.data.uuid
        } else {
          formData.imgcodeShow = false

        }

      })
    }
    const setPwd = async () => {
      formData.loading = true
      if (formData.verificationCode) {
        pwdwarp.value.pwdShow = true


      } else {
        Toast('请输入验证码')
      }
      formData.loading = false
    }
    return {
      user_info, formData, GetCode, close, getImgcode, setPwd, pwdwarp

    }
  }

}
</script>
<style lang="less" scoped>
.pwd {
  &:deep(.van-cell-group) {
    background: transparent;
    margin-top: 100px;
  }
  &:deep(.van-field) {
    width: 684px;
    height: 100px;
    background: #282a2c;
    border: 1px solid #ffffff;
    border-radius: 18px;
  }
  .block_gradual {
    width: 682px;
    height: 92px;
    background: linear-gradient(-90deg, #37dc6d, #34d1f9);
    border-radius: 46px;
    margin: 300px 30px 0px;
  }
  .getCodeClass {
    border: none;
    height: 47px;
    background: linear-gradient(-90deg, #37dc6d, #34d1f9);
    border-radius: 24px;
  }
}
.imgcode {
  width: 100%;
  background: rgba(0, 0, 0, 0.8);
  height: 80vh;
  position: fixed;
  top: 0;
  left: 0;
  padding-top: 4rem;
  .block_gradual {
    margin: 0.6rem 0px;
  }
  h1 {
    font-size: 36px;
    text-align: center;
  }
  .warp {
    position: relative;
    background: white;
    padding: 5%;
    border-radius: 8px;
    width: 80%;
    margin: 0 auto;
    .close {
      position: absolute;
      font-size: 0.7rem;
      right: 3%;
      top: 3%;
    }
    .flex {
      margin-top: 0.5rem;
      display: flex;
      &:deep(.van-field) {
        border: solid 1px #8c8a8a;
        border-radius: 4px;
        background: transparent !important;
      }
      &:deep(.van-field__control) {
        font-size: 26px;
        color: #282a2c;
      }
    }
  }
}
</style>